<template>
	<view class="diy-buy">
		<scroll-view class="left-box" :scroll-y="true" :scroll-top="leftTop" :scroll-with-animation="animation">
			<view class="left-menu">
				<view :class="list.id==type?'menu-list menu-active':'menu-list'"
				@click="leftClick(key)"
				 v-for="(list,key) in data" :id="list.id">
					<view class="active-box"></view>
					<view class="menu-con">
						<u--image v-if="list.icon.length" :showLoading="true"
						:src="list.icon"
						 width="20px" height="20px" ></u--image>
						<text class="menu-name">{{list.name}}</text>
					</view>
				</view>
			</view>
			<view style="height: 100px;"></view>
		</scroll-view>
		<scroll-view class="right-goods" scroll-y @scroll="rightScroll" :scroll-top="rightTop" 
		:scroll-with-animation="animation">
			<view class="list-box" v-for="list in data">
				<view class="type-name">
					<text style="margin-left: 10px;">{{list.name}}</text>
				</view>
				<view class="goods-list" v-for="goods in list.list" @click="navto('page_mall/goods/info?id='+goods.id)">
					<u--image :showLoading="true"
					:src="goods.img" radius="6"
					 width="80px" height="80px" ></u--image>
					 <view class="goods-info">
						 <text class="u-line-1 goods-title">{{goods.title}}</text>
						 <view class="keywords" v-if="goods.keywords.length">
							 <text v-for="tag in goods.keywords">{{tag}}</text>
						 </view>
						 <text class="u-line-1 goods-desc" v-else-if="goods.desc.length">{{goods.desc}}</text>
						 <view style="font-size: 11px;color: #888;margin: 5px 0;">
							 <text>销量：{{Number(goods.snum)+Number(goods.origin_snum)}}</text>
							  <text style="margin-left: 10px;">好评：{{goods.haoping}}%</text>
						 </view>
						 <view style="display: flex;flex-direction: row;justify-content: space-between;">
							<view>
								<text style="color: red;">￥{{goods.shop_price}}</text>
								
							<!-- 	<text v-if="goods.market_price>goods.shop_price" style="font-size: 11px;color: #999;
								text-decoration: line-through;margin-left: 5px;;">￥{{goods.market_price}}</text> -->
							</view>
							<view>
								<template v-if="goods.spec_type==1">
									<template v-if="!check[goods.id]">
										<view
										@click.stop="add(goods)" v-if="goods.min==1"
												class="plus" :style="'background-color: '+app_color">
										            <u-icon
										                name="plus"
										                color="#FFFFFF"
										                size="12"
										            ></u-icon>
										</view>
										<view v-else @click.stop="add(goods)" class="buy-btn" :style="'background-color: '+app_color">
											<!-- <u-icon name="plus" size="12" color="#fff"></u-icon> -->
											<text style="margin-left: 3px;">{{goods.min}}件起售</text>
										</view>
								
											
									</template>
									<u-number-box v-else
									buttonSize="10"
									    color="#ffffff"
									    iconStyle="color: #fff"
									>
									  <view
												@click.stop="jian(goods)"
									            slot="minus"
									            class="minus"
									        >
									            <u-icon
									                name="minus"
									                size="12"
									            ></u-icon>
									        </view>
											 <text slot="input"
												style="width: 30px;text-align: center;font-size: 14px;
												color: #666">{{check[goods.id].num}}</text>
									<view slot="plus"
									@click.stop="add(goods)"
											class="plus" :style="'background-color: '+app_color">
									            <u-icon
									                name="plus"
									                color="#FFFFFF"
									                size="12"
									            ></u-icon>
									        </view>
									</u-number-box>
								</template>
								<template v-else>
									<view  @click.stop="add(goods)" class="buy-btn" :style="'background-color: '+app_color">
										<!-- <u-icon name="plus" size="12" color="#fff"></u-icon> -->
										<text style="margin-left: 3px;">选择规格</text>
									</view>
								</template>
							</view>
						 </view>
					 </view>
				</view>
			</view>
			<view style="height: 100px;"></view>
		</scroll-view>
		<goods-buy ref="goods_buy"  @addCart="addCart"></goods-buy>
		<moxi-shop-cart ref="moxishopcart" @change="moxi_shop_cart"></moxi-shop-cart>
	</view>
</template>

<script>
	export default {
		name:"diy-buy",
		data() {
			return {
				app_color:"",
				data:[],
				cartList:[],
				type:false,//当前分类
				leftTop:0,//左侧导航滚动条位置
				leftHeight:0,//左侧导航总高度
				rightTop:0,//右侧位置
				animation:true,//滚动过度效果
				check:{},
				isInit:false,
				datalist:[]
			};
		},props:{
			 set:{
				type:Object,
			 	default(){
					return {
						
					}
				}
			 },
			 dataList:{//从外部传入数据，当为空时自动获取快捷购买商品
			 	type:Array,
			 	default(){
						return []
					}
			 }
		}
		,created() {
			let self = this;
			this.app_color = this.$appData.data.app_color;
			// #ifdef MP-ALIPAY
			this.animation = false;
			// #endif
			if(this.dataList.length){
				this.data = this.datalist;
				this.init();
			}else{
				this.moxiPost('/plugin/mall/index/goods/buy_list',function(data){
					self.data = data.data;
					self.init();
				})
			}
			
		},mounted() {
			let self = this;
			if(this.getUserInfo()){
				this.$nextTick(function(){
					self.$refs.moxishopcart.init()
					self.isInit = true;
				})
			}
		},methods:{
			addCart(e){
				this.$refs.moxishopcart.init()
			},
			moxi_shop_cart(e){//购物车数据改变后回调
				for(let k in e){
					for(let g in e[k].spec_info){
						this.$set(this.check,e[k].goods_id,e[k].spec_info[g])
						break;
					}
				}
			},
			add(goods){
				if(goods.spec_type==1){
					let self = this;
					let info = {
						num:1,
						goods_id:goods.id,
						spec_name:''
					}
					if(!this.check[goods.id]){
						info.num = goods.min;
					}
					if(info.num>goods.stock){
						this.msg('库存不足！');
						return false;
					}
					this.moxiPost("/plugin/mall/user/cart/created",info,function(data){
						self.$refs.moxishopcart.init();
						self.msg('添加购物车成功')
					})
				}else{
					this.$refs.goods_buy.open(goods.id)
				}
			},
			jian(goods){//这个只针对单规格商品
				if(!this.check[goods.id]){
					return false;
				}
				
				if(this.check[goods.id].num<=goods.min){
					this.$delete(this.check,goods.id);
				}
				let self = this;
				let info = {
					num:-1,
					goods_id:goods.id,
					spec_name:''
				}
				this.moxiPost("/plugin/mall/user/cart/created",info,function(data){
					self.$refs.moxishopcart.init()
					self.msg('修改数量成功')
				})
			},
			leftClick(key){
				if(this.data[key].id==this.type){
					return;
				}
				this.type = this.data[key].id;
				this.rightTop = this.data[key].minTop;
			},
			init(){
				this.leftHeight = this.data.length*50;
				for(let k in this.data){
					this.data[k].height = this.data[k].list.length*110+30;//该分类高度
					this.data[k].leftTop = 50*k;
					if(k==0){
						this.type = this.data[k].id;
						this.data[k].minTop = 0;
						this.data[k].maxTop = this.data[k].height;
					}else{
						this.data[k].minTop = this.data[k-1].maxTop;
						this.data[k].maxTop = this.data[k-1].maxTop+this.data[k].height;
					}
				}
			},
			rightScroll(e){
				const top = e.detail.scrollTop;
				for(let k in this.data){
					if(top>=this.data[k].minTop&&top<this.data[k].maxTop){
						if(this.type!=this.data[k].id){
							this.type = this.data[k].id;
							this.leftTop = this.data[k].leftTop
						}
						break
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.type-name{
		/* #ifndef MP-ALIPAY */
		top: 0;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		top: -1px;
		/* #endif */
		position: sticky;background-color: #fff;font-size: 14px;
		color: #555;z-index: 10;height: 30px;align-items: center;display: flex;flex-direction: row;
	}
	.minus{width: 20px;
		height: 20px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;}
			.plus {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
			}
	.diy-buy{display: flex;flex-direction: row;height: 100vh;position: relative;overflow: hidden;
	}
	.left-box{width: 200rpx;background-color: #f5f5f5;}
	.right-goods{width: 550rpx;}
.left-menu{overflow-y: auto;
	
	display: flex;flex-direction: column;
}
.active-box{width: 4px;height: 30px;background-color: red;display: none; border-radius: 0 5px 5px 0;
position: absolute;left: 0;top: 10px;}
.menu-list{font-size: 14px;color: #3d3d3d;position: relative;
height: 50px;display: flex;flex-direction: row;
align-items: center;

.menu-name{margin-left: 5px;line-height: 20px;}

}
.menu-con{margin-left: 5px;display: flex;flex-direction: row;}
.menu-active .menu-con{margin-left: 10px;}
.menu-active{background-color: #fff;}
.menu-active .active-box{display: block!important;}

.list-box{display: flex;flex-direction: column;background-color: #fff;}
.goods-list{display: flex;flex-direction: row;
margin:5px;height: 90px;overflow-y: hidden;background-color: #ffffff;border-radius: 5px;
padding:5px;}
.goods-info{display: flex;flex-direction: column;margin-left: 5px;flex-grow: 1;}
.goods-title{font-size: 15px;font-weight: 600;}
.goods-desc{font-size: 12px;color: #a2a2a2;}

.keywords{display: flex;flex-direction: row;flex-wrap: nowrap;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical !important;;
	text{
		font-size: 11px;
		color: #555;
		background-color: #eee;
		padding: 1px 4px;
		 margin-right: 4px;
		 border-radius: 3px;
		 flex:0 0 auto;
		}
}
.buy-btn{padding: 4px;display: flex;flex-direction: row;
										border-radius: 100px;color: #fff;font-size: 11px;}
</style>